DWEI5_Aula04_CSS-PropriedadesLayout


	Instituto Federal de São Paulo (IFSP) Campus Bragança Paulista/SP Análise e Desenvolvimento de Sistemas (ADS) 5o. módulo Profa. Ana Paula Müller Giancoli paulagiancoli@ifsp.edu.br

1. Document Object Model (DOM)¶

Significa Document Object Model, Modelo de Objeto de Documento.
Ele define a estrutura lógica dos documentos e a maneira como um documento é acessado e manipulado. A estrutura lógica que é muito parecida com uma árvore.
Cada documento contém zero ou um nó do tipo doctype. Um nó do elemento raiz e zero ou mais comentários ou instruções de processamento; o elemento raiz serve como raiz da árvore de elementos do documento.

2. Box Model padrão do CSS¶

O box model (modelo das caixas) em CSS, descreve os boxes (as caixas) geradas pelos elementos HTML.
O box model, detalha ainda, as opções de ajuste de margens, bordas, padding e conteúdo para cada elemento.
É uma propriedade que determina o tamanho final (altura e largura) dos elementos.

E o box model tradicional da especificação tem uma regra bastante confusa:
- A propriedade element width trata do tamanho do conteúdo do elemento, não considerando seu padding e border (e a mesma coisa com a altura).
- Se você quiser que um elemento ocupe metade da página mas com uma borda de 10px, não funciona utilizar:
```
#elemento {
  border: 10px solid #555;
  width: 50%;
}
```
O tamanho final do elemento terá 20px mais da metade do tamanho do pai.
Surge então a propriedade box-sizing que considera o tamanho final do elemento, considerando o padding e border.

2.1. Propriedade box-sizing¶

Por padrão todos os elementos possuem o valor do box-sizing: content-box.
Valores possíveis:
- border-box: indica que o tamanho considerará até a borda do elemento (width = border + padding).
- content-box: indica que o tamanho dele é definido pelo seu conteúdo apenas (valor default). É o box model tradicional (width = element width).
Observação:
- Os elementos em blocos, ocupam o máximo da largura e o mínimo de altura.
- Os elementos em linha, ocupam o espaço do conteúdo. Quando se usa valores em %, os cálculos das larguras e alturas dos elementos são feitos em relação aos elementos pais.
- As versões mais antigas do Firefox precisa do prefixo -moz- e, Chrome, Safari e Android, do -webkit-.

/* Valor padrão */
#elemento {
    box-sizing: content-box;
}

#elemento {
    box-sizing: border-box;
}

Exemplos¶

2.1.1 box-sizing: border-box;¶

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aula04</title>
    <link href="https://fonts.googleapis.com/css2?family=Modak&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <h1> IFSP - Bragança Paulista  </h1>
  <div id="content">
    <div class="item">01</div>
    <div class="item">02</div>
    <div class="item">03</div>
    <div class="item">04</div>
  </div>
</body>
</html>

/* Arquivo css/estilo.css */  
/* propriedades css para formatação do identificador content */
#content {
  background-color: #2e86c1;  /* propriedade para cor de fundo */
  height: 600px;              /* propriedade para altura de conteúdo */
  width: 600px;               /* propriedade para largura de conteúdo */
  padding: 5px;               /* propriedade para espaçamento ao redor do conteúdo */
}

.item {
  width: 250px;               /* propriedade para largura do conteúdo */
  height: 100px;              /* propriedade para altura do conteúdo */
  box-sizing: border-box;     /* propriedade para tamanho do conteúdo */
  border: 2px solid red;      /* propriedade para borda do conteúdo */
  padding: 10px;              /* propriedade para espaçamento ao redor do conteúdo */
  margin: 10px;               /* propriedade para margens ao redor do conteúdo */
  color: #000;                /* propriedade para cores do texto do conteúdo */
  font-weight: bold;          /* propriedade para negrito do texto do conteúdo */
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);  /* propriedade para sombra do conteúdo */
  background-color: #fff;     /* propriedade para cor de fundo do conteúdo */
}

Saída:

Representação do CSS no Box Model de um elemento (class="item"):

border-box: indica que o tamanho considerará até a borda do elemento (width = border + padding).
Uso do box-sizing: border-box; width: 250px; height: 100px;
Neste exemplo, a largura final do elemento será de 250px.

2.1.2. box-sizing: content-box;¶

Este é o padrão da propriedade.

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aula04</title>
    <link href="https://fonts.googleapis.com/css2?family=Modak&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <h1> IFSP - Bragança Paulista  </h1>
  <div id="content">
    <div class="item">01</div>
    <div class="item">02</div>
    <div class="item">03</div>
    <div class="item">04</div>
  </div>
</body>
</html>

/* Arquivo css/estilo.css */  
/* propriedades css para formatação do identificador content */
#content {
  background-color: #2e86c1;  /* propriedade para cor de fundo */
  height: 600px;              /* propriedade para altura de conteúdo */
  width: 600px;               /* propriedade para largura de conteúdo */
  padding: 5px;               /* propriedade para espaçamento ao redor do conteúdo */
}

.item {
  width: 250px;               /* propriedade para largura do conteúdo */
  height: 100px;              /* propriedade para altura do conteúdo */
  box-sizing: content-box;     /* propriedade para tamanho do conteúdo */
  border: 2px solid red;      /* propriedade para borda do conteúdo */
  padding: 10px;              /* propriedade para espaçamento ao redor do conteúdo */
  margin: 10px;               /* propriedade para margens ao redor do conteúdo */
  color: #000;                /* propriedade para cores do texto do conteúdo */
  font-weight: bold;          /* propriedade para negrito do texto do conteúdo */
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);  /* propriedade para sombra do conteúdo */
  background-color: #fff;     /* propriedade para cor de fundo do conteúdo */
}

Saída:

Representação do CSS no Box Model de um elemento (class="item"):

content-box: indica que o tamanho dele é definido pelo seu conteúdo apenas (valor default). É o box model tradicional (width = element width).
Uso do box-sizing: content-box; width: 250px; height: 100px;
Neste exemplo, a largura final do elemento será 250px + 20px + 4px, totalizando 274px.

Resumo Comparativo¶

A diferença é mínima ao visualizar as duas telas com os retângulos.

2.1.1 border-box		2.1.2 content-box
box-sizing: border-box; width: 250px; height: 100px;		box-sizing: content-box; width: 250px; height: 100px;
Largura Final = 250px		Largura Final = 250px + 20px + 4px = 274px

3. Propriedades CSS de Layout¶

3.1. Propriedade Margin¶

Para aprofundamento, consulte MDN Web Docs.
Margin: É a distância a partir de cada um dos lados e de seus elementos vizinhos (ou às bordas do documento).
Margin: aplica formatação do espaçamento do elemento em relação a seus adjacentes.
Valores possíveis: em, pixels, %.
Sintaxe: Podemos declarar de 4 maneiras:

/* Exemplo 1 */
#elemento {
    margin: top/bottom/right/left;
}
/* Exemplo 2 */
#elemento {
    margin: top/bottom right/left;
}
/* Exemplo 3 */
#elemento {
    margin: top right/left bottom;
}
/* Exemplo 4 */
#elemento {
    margin: top right bottom left;
}

Exemplo1	Exemplo2	Exemplo3	Exemplo4
margin: 10px;	margin: 10px 8px;	margin: 10px 8px 6px;	margin: 10px 8px 6px 12px;

3.2. Propriedade Padding¶

Para aprofundamento, consulte MDN Web Docs.
Padding: É a distância do elemento entre a borda e o seu conteúdo.
Padding: aplica formatação do espaçamento ao redor do elemento em relação a sua borda.
Valores possíveis: em, pixels, %.
Sintaxe: Podemos declarar de 4 maneiras:

/* Exemplo 1 */
#elemento {
    padding: top/bottom/right/left;
}
/* Exemplo 2 */
#elemento {
    padding: top/bottom right/left;
}
/* Exemplo 3 */
#elemento {
    padding: top right/left bottom;
}
/* Exemplo 4 */
#elemento {
    padding: top right bottom left;
}

Exemplo1	Exemplo2	Exemplo3	Exemplo4
padding: 10px;	padding: 10px 8px;	padding: 10px 8px 6px;	padding: 10px 8px 6px 12px;

3.3. Propriedade Position (Atualmente está sendo pouco usado)¶

Para aprofundamento, consulte MDN Web Docs.
Ou ainda o artigo 5 Things You Might Not Know About the CSS Positioning Types.
A propriedade Position indica ao navegador como ele tratará aquele elemento.
Position: Aplica formatação à posição dos elementos.
Valores possíveis:
- Static: por default, os elementos são static. Neste caso, não poderá definir a posição com left, right, top e bottom. Onde o elemento estiver ele ficará.
- Relative: mantém na posição do fluxo normal do documento. Permitido definir a posição utilizando: top, left, right e bottom. O elemento será posicionado aonde for designado, caso esteja sozinho. Caso contrário, será movido conforme valores atribuídos e demais elementos da página. O posicionamento é sempre feito em relação os demias elementos da página. E os valores negativos, movem os elementos para sentidos inversos.
- Absolute: leva o elemento para fora do fluxo normal do documento, deixando um espaço pra trás. Em um elemento definido desta forma, as coordenadas x, y são relativas a seu pai, posicio- nando em relação as bordas do elemento ou corpo, se não tiver elemento pai.
- Fixed: similar ao absoluto, porém, está travado na posição relativa ao viewport. Quando usa scroll, os elementos fixos não serão movidos com o resto do documento.

3.4. Propriedade Float (Atualmente está sendo pouco usado)¶

Para aprofundamento, consulte MDN Web Docs.
Ou ainda o artigo CSS: Truques para dominar a propriedade Float.
O Float é uma propriedade que faz o objeto flutuar à esquerda ou à direita do restante do conteúdo. Mediante o arquivo html abaixo, aplicaremos algumas modificações para exemplificar o uso do float.
float: aplica a formatação no elemento de forma a mostrar como ele interage com os demais.
Valores possíveis: left, right, none.
Sintaxe:

#elemento { 
    float: left;
}

Para limpar o float, utiliza-se clear.¶

clear: Limpa a formatação dos elementos que usaram float.
Valores possíveis: right, left, both ou none.

<!-- Exemplo index.html sem float -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Float</title>
    <style>
      .tudo {
        background-color: #2e86c1;
        height: 600px;
        width: 600px;
        padding: 5px;
      }
      .menu, .conteudo {
        height: 100px;
        width: 250px;
        color: #000;
        font-weight: bold;
        box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
        background-color: #ffffff;
        margin: 10px;
      }
    </style>
</head>
<body>
  <div class="tudo">
      <div class="menu">Menu</div>
      <div class="conteudo">Conteúdo</div>
  </div>
</body>
</html>

Saída:

É exibido as duas divisões uma sobre a outra. Com larguras de 250px cada.

<!-- Exemplo index.html COM float -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Float</title>
    <style>
      .tudo {
        background-color: #2e86c1;
        height: 600px;
        width: 600px;
        padding: 5px;
      }
      .menu, .conteudo {
        height: 100px;
        width: 250px;
        color: #000;
        font-weight: bold;
        box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
        background-color: #ffffff;
        margin: 10px;
      }
/* Inclusão do FLOAT */
      .menu {
        float: left;
        width: 30%;
      }
      .conteudo {
        float: right;
        width: 60%;
      } 
    </style>
</head>
<body>
  <div class="tudo">
      <div class="menu">Menu</div>
      <div class="conteudo">Conteúdo</div>
  </div>
</body>
</html>

Saída:

Observação:
- É exibido as duas divisões uma ao lado da outra, porém, suas larguras foram modificadas para atender a condição de float, onde a classe menu passou a ter 30%, e a classe conteúdo 60%, totalizando 90% da largura total que é 600px.
- Caso ultrapasse a largura do elemento pai, o elemento é automaticamente levado para a linha abaixo. Ou na direira ou na esquerda, dependendo da configuração do float.

3.5. Propriedade Visibility¶

Parta aprofundamento, consulte MDN Web DOCS.
Ou ainda o artigo Visibility.
Visibility: Pode ser usada para ocultar um elemento enquanto deixa o espaço onde ele teria sido criado. Também utilizado para ocultar linhas e colunas de uma tabela.
Valores possíveis:
- visible: valor default, o elemento está sempre visível.
- hidden: esconde o elemento não modifica o layout. Os filhos serão visíveis se estiverem com o valor visible.
- collapse: as linhas ou colunas estão ocultas e o espaço que ocuparam é removido.

/* Código omitido para facilitar a visualização da modificação */
.menu {
        float: left;
        width: 30%;
        visibility: hidden;
      }
/* Código omitido para facilitar a visualização da modificação */

Saída:

Neste caso, a classe menu, recebeu a propriedade visiility: hidden, o que fez ocultar a classe, porém permite a reserva do espaço, não sendo preeenchido com nada.
Caso utilize o valor collapse, então seu espaço poderá ser preenchido.

3.6. Propriedade Outline¶

Para aprofundamento consulte, MDN Web Docs.
Ou ainda o artigo Outline.
Outline: Aplica a formatação ao redor do elemento, externo às bordas.
Valores possíveis: de cor, de estilo de linha e espessura.
- outline-color: valor;
- outline-style: valor;
- outline-width: valor; ou
- outline: outline-color outline-style outline-width;

Exemplo:

#elemento {
    outline: rgba(0, 0,107,.65) solid 5px;
}

Ainda utilizando o exemplo anterior original sem a propriedade visibility, e modificando somente as classes:

/* Código omitido para facilitar a visualização da modificação */
.menu, .conteudo {
        height: 100px;
        width: 250px;
        color: #000;
        font-weight: bold;
        box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
        background-color: #ffffff;
        margin: 10px;
        outline: rgba(0, 0,107,.65) solid 5px;
}
/* Código omitido para facilitar a visualização da modificação */

Saída:

3.7. Propriedade Display¶

Para aprofundamento, consulte MDN Web Docs.
Display: Aplica a formatação de quebra antes ou depois, conforme os valores da propriedade.
Valores possíveis:
- inline: elementos exibidos em linha (valor default). Por exemplo: as tags strong, a, em.
- block: é inserida uma quebra de linha antes e depois do elemento. Por exemplo: as tags h1, h2, p. São exibidos em blocos.
- none: não exibe o elemento com efeitos avançados. Se utilizar a propriedade visibility: hidden; você esta indicando ao browser para esconder o elemento.
- inline-block: área como bloco, e itens dentro como linha.
- list-item: igual a li.
- flex: cada conteúdo filho se comporta como se fosse um bloco.

4. Propriedades CSS de Layout - Display com o valor Flex¶

FlexBox¶

Para aprofundamento do assunto, consulte MDN Web Docs.
Leia também o Guia do Flexbox, CSS-Tricks.

<!-- Exemplo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Aula04</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <h1> IFSP - Bragança Paulista  </h1>
  <div id="content">
    <div class="item">01</div>
    <div class="item">02</div>
    <div class="item">03</div>
    <div class="item">04</div>
  </div>
</body>
</html>

/* Exemplo estilo.css */
#content {
  background-color: #2e86c1;
  height: 600px;  
  width: 600px;            
  padding: 5px;
}

.item {
  width: 100px; 
  height: 100px;  
  margin: 10px; 
  color: #000; 
  font-weight: bold; 
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5); 
  background-color: #fff;   
}

Saída:

4.1. Display: Flex¶

display: flex; : Indica que o conteúdo dentro de um container se comportará como um bloco, um container.
Exemplo:
- No arquivo estilo.css:
  - Inserir a propriedade display: flex no identificador #content.
  - Na Figura a seguir, é exibido como é visualizado no navegador.

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

/* Arquivo estilo.css foi inserido a propriedade display: flex */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;
  padding: 5px;
  display: flex;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

4.2. Flex-direction¶

flex-direction: formata a direção do posicionamento dos elementos.
Valores possíveis:
- row: exibe os itens na direção de linha, da esquerda pra direita. (valor default).
- column: exibe os itens na direção de coluna de cima pra baixo.
- row-reverse: exibe os itens na direção de linha, da direita pra esquerda.
- column-reverse: exibe os itens na direção de coluna de baixo pra cima.
- Exemplo:
  - No arquivo estilo.css:
    - Inserir a propriedade flex-direction: row no identificador #content.
    - E em seguida, altere para os demais valores para verificar como será visualizado no navegador.

flex-direction : row;¶

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    display: flex;
    flex-direction: row;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

flex-direction : column;¶

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    display: flex;
    flex-direction: column;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

flexdirection: row-reverse;¶

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    display: flex;
    flex-direction: row-reverse;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

flexdirection: column-reverse;¶

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    display: flex;
    flex-direction: column-reverse;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

4.3. Flex-wrap¶

flex-wrap: determina se os elementos filhos aceitarão ou não uma quebra de conteúdo.
Valores possíveis:
- wrap: permitem a quebra de conteúdo filhos.
- nowrap: não permitem a quebra de conteúdo filhos (valor default).
- wrap-reverse: efetuam a quebra de conteúdo filhos e são exibidos de forma inversa (de baixo para cima).
Ou usar:

#elemento { 
    flex-flow: flex-direction flex-wrap;
}

Exemplo1¶

No arquivo css:
- Inserir a propriedade flex-wrap: nowrap no identificador #content.
- Nesta situação, a visualização será idêntica ao que foi apresentado com a propriedade flex-direction: row. Pois os itens filhos são ajustados dentro do espaço para não quebrarem.

flex-wrap: nowrap;¶

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

Exemplo2¶

No arquivo css:
- Altere a propriedadede largura (width: 100px) na classe .item, para width: 250px.
- Os itens filhos são redimensionados para caberem dentro do espaço definido.
- Agora, altere a propriedade flex-wrap: nowrap no identificador #content para flex-wrap: wrap.

flex-wrap: wrap;¶

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    flex-direction: row;
    flex-wrap: wrap;     /* Modificado de nowrap para wrap */
}
.item {
  width: 250px;          /* Modificado de 100px para 250px */
  height: 100px;
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Saída:

Exemplo3¶

No arquivo css:
- Mantendo a propriedadede largura na classe .item, com width: 250px.
- E em seguida, altere a propriedade flex-wrap para os demais valores.

flex-wrap: wrap-reverse;¶

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    flex-direction: row;
    flex-wrap: wrap-reverse;     /* Modificado de wrap para wrap-reverse */
}
.item {
  width: 250px;                  /* Modificado de 100px para 250px */
  height: 100px;
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Saída:

Exemplo4:¶

No arquivo css:
- Altere flex-direction: row para a propriedade flex-direction: column-reverse.
- E a propriedade flex-wrap: wrap-reverse.

flex-wrap: wrap-reverse;¶

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    flex-direction: column-reverse;
    flex-wrap: wrap-reverse;     /* Modificado de wrap para wrap-reverse */
}
.item {
  width: 250px;                  /* Modificado de 100px para 250px */
  height: 100px;
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Saída:

4.4. Justify-content¶

justify-content: determina o posicionamento dos elementos na página.
Valores possíveis:
- flex-start: todos os elementos filhos são alinhados à esquerda, no topo (valor default).
- flex-end: todos os elementos filhos são alinhados à direita, sem inversão de ordem.
- space-around: os elementos filhos são distribuídos ao redor do elemento e de maneira uniforme dentro do espaço do container.
- space-between: os elementos filhos são distribuídos a partir do centro do container para as extremidades. Sem inserir margem na lateral.
Ou usar:

#elemento { 
    justify-content: flex-start;
}

Exemplo1:¶

No arquivo css:
- Altere a propriedadede largura (width: 250px) na classe .item, para width: 100px.
- Altere a propriedadede largura (width: 600px) no identificador #content, para width: 900px.
- E a propriedade flex-direction para row.
- E a propriedade flex-wrap para wrap.
- E acrescente a propriedade justify-content: flex-start.

justify-content: flex-start;¶

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 900px;         /* modificado de 600px para 900px */
  padding: 5px;
  display: flex;
  flex-direction: row;  /* modificado para row */
  flex-wrap: wrap;      /* modificado para wrap */
  justify-content: flex-start;  /* inserido */
}

.item {
  width: 100px;         /* modificado de 250px para 100px */
  height: 100px;
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Saída:

Exemplo2:¶

No arquivo css:
- Altere a propriedadede justify-content: flex-start para justify-content: flex-end.

justify-content: flex-end;¶

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 900px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-end;  /* modificado de flex-start para flex-end */
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

Exemplo3:¶

No arquivo css:
- Altere a propriedadede justify-content: flex-end para justify-content: space-around.

justify-content: space-around;¶

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 900px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: space-around;  /* modificado de flex-end para space-around */
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

Exemplo4:¶

No arquivo css:
- Altere a propriedadede justify-content: space-around para justify-content: space-between.

justify-content: space-between;¶

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 900px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: space-between;  /* modificado de space-around para space-between */
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

4.5. Align-items¶

align-items: determina o posicionamento vertical dos elementos na página.
Valores possíveis:
- flex-start: exibe os elementos do container do topo para baixo, da esquerda para direita (valor default).
- flex-end: exibe os elementos do container de baixo pra cima, da esquerda para direita.
- center: centraliza todos os elementos.
- strech: exibe os elementos do topo para baixo, caso não tenha sido definido a altura dos elementos filhos do container, os mesmos são esticados até abaixo. Para visualizar, remova a propriedade height: 100px da classe .item.
- baseline: é um alinhamento sensível ao conteúdo.
Ou usar:

#elemento { 
    align-items: flex-start;
}

Exemplo1:¶

No arquivo css:
- Altere a propriedadede justify-content: space-between; no identificador #content, para justify-content: flex-start;.
- Retorne a largura do identificador #content de 900px para width: 600px.
- E acrescente a propriedade align-items: flex-start.

align-items: flex-start;¶

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-start;  
  align-items: flex-start;
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

Exemplo2:¶

No arquivo css:
- E altere a propriedade align-items: flex-start para align-items: flex-end;.

align-items: flex-end;¶

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-start;  
  align-items: flex-end;
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

Exemplo3:¶

No arquivo css:
- E altere a propriedade align-items: flex-end; para align-items: center;.

align-items: center;¶

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-start;  
  align-items: center;
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

Exemplo4:¶

No arquivo css:
- E altere a propriedade align-items: center; para align-items: strech;.
- Remova a altura (height: 100px) da classe .item.

align-items: strech;¶

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-start;  
  align-items: strech;
}
.item {
  width: 100px;    /* height removido */
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Saída:

Exemplo5:¶

No arquivo css:
- E altere a propriedade align-items: strech; para align-items: baseline;.
- Mantenha a remoção da altura (height: 100px) da classe .item.

align-items: baseline;¶

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->

/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-start;  
  align-items: baseline;
}
.item {
  width: 100px;    /* height removido */
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Saída:

Existem outras propriedades, tal como align-content. Pesquise a respeito!¶

4.6. Order¶

order: determina a ordem em que os elementos serão exibidos na página.
Valores possíveis:
- valores inteiros.
Definindo uma pseudo-classe para cada um dos itens filhos. Teremos:

.item:nth-child(1) { 
    order: 4; 
}
.item:nth-child(2) { 
    order: 3;
}
.item:nth-child(3) { 
    order: 1; 
}
.item:nth-child(4) { 
    order: 2; 
}

Importante:

Mantendo os valores padrões para as propriedades no identificador #content:

display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;

Acrescente as pseudo-classes após a classe .item, o arquivo css ficará assim:

#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px; /* modificado de 600px para 900px */
  padding: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

.item:nth-child(1) { 
    order: 4; 
}
.item:nth-child(2) { 
    order: 3;
}
.item:nth-child(3) { 
    order: 1; 
}
.item:nth-child(4) { 
    order: 2; 
}

Saída:

4.7. Flex-grow¶

flex-grow: define a propriedade de crescer o elemento na página.
Valores possíveis:
- O valor default é 0.
- Não é possível valores negativos.
- Se um item filho tiver o flex-grow: 2, ele ocupará duas vezes mais o espaço previsto para os outros elementos. E se o width dos elementos estiver definido, ele ocupará o espaço restante.

4.8. Flex-shrink¶

flex-shrink: define a propriedade de encolher o elemento na página. Somente como informativo.
Valores possíveis:
- Valores possíveis: valores inteiros.
- O valor default é 1.
- Não é possível valores negativos.

4.9. Flex-basis¶

flex-basis: define o width dos elementos antes de distribuir o restante para o flex-grow.
Valores possíveis:
- Valores possíveis: valor em pixel.
- O valor default é auto.
- Se definir 0, os elementos não serão redimensionados.

Exemplo1:¶

No arquivo css:
- Na classe .item, definindo os valores default para as 3 propriedades e removendo width da classe .item**.
- Acrescente a definição das pseudo-classes acrescentando flex-grow:2; na primeira pseudo-classe.
- Teremos a classe .item da seguinte forma:

.item {
  /* width: 100px; removido */
  height: 100px; 
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
  flex-grow: 0;         /* inserido */
  flex-shrink: 1;       /* inserido */
  flex-basis: auto;     /* inserido */
}

.item:nth-child(1) { 
    order: 4; 
    flex-grow: 2;  /* inserido */
}
.item:nth-child(2) { 
    order: 3;
}
.item:nth-child(3) { 
    order: 1; 
}
.item:nth-child(4) { 
    order: 2; 
}

Saída:

Exemplo2:¶

No arquivo css:
- Na classe .item, modifique o valor da propriedade flex-basis: auto; para flex-basis: 65px;, assim os elementos serão definidos nesta largura e o espaço restante é usado nos elementos que foram configurados com a propriedade flex-grow.
- Teremos a classe .item da seguinte forma:

.item {
  /* width: 100px; removido */
  height: 100px; 
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
  flex-grow: 0;         /* inserido */
  flex-shrink: 1;       /* inserido */
  flex-basis: 65px;     /* inserido */
}

.item:nth-child(1) { 
    order: 4; 
    flex-grow: 2;  /* inserido */
}
.item:nth-child(2) { 
    order: 3;
}
.item:nth-child(3) { 
    order: 1; 
}
.item:nth-child(4) { 
    order: 2; 
}

Saída:

Os itens 03, 04 e 02 possuem 65px da largura, enquanto que o item 01 expandiu no restante do espaço, pois possui o valor de flex-grow definido.

Observação:

Para fixar o conteúdo, acesse: Flexbox Playground.

5. CSS-Grid¶

Para ampliar o conhecimento, consulte o artigo CSS Grid: One Layout, Multiple Ways.
De acordo com [CSS-TRICKS], "o CSS Grid Layout é o sistema de layout mais poderoso disponível em CSS. É um sistema bidimensional, o que significa que pode lidar com colunas e linhas, ao contrário do flexbox, que é amplamente um sistema unidimensional. Você poderá trabalhar com o Grid Layout aplicando regras CSS tanto a um elemento pai (que se torna o Grid Container) quanto aos filhos desse elemento (que se tornam Grid Items".
Para aprofundamento no assunto, sugiro a leitura do Guia completo do CSS-GRID.
CSS-Tricks: Grade CSS: um layout, várias maneiras.

6. Lista de Tags CSS para Flexbox¶

Criado por Joni Bologna.

Referências¶

Esta aula foi elaborada a partir do conteúdo disponibilizado em cada um dos links indicados no próprio texto.

Perguntas¶

Esclareça suas eventuais dúvidas durante as aulas.
Ou pelo E-mail: paulagiancoli@ifsp.edu.br.
Ou pelo Fórum do componente curricular.

ADS - HTML5, CSS3, JS - 5o. módulo.
Modelo e formato elaborado por profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2020.

AULA 04 - PROPRIEDADES CSS DE LAYOUT¶

Agenda¶

1. Document Object Model (DOM)¶

2. Box Model padrão do CSS¶

2.1. Propriedade box-sizing¶

Exemplos¶

2.1.1 box-sizing: border-box;¶

2.1.2. box-sizing: content-box;¶

Resumo Comparativo¶

3. Propriedades CSS de Layout¶

3.1. Propriedade Margin¶

3.2. Propriedade Padding¶

3.3. Propriedade Position (Atualmente está sendo pouco usado)¶

3.4. Propriedade Float (Atualmente está sendo pouco usado)¶

Para limpar o float, utiliza-se clear.¶

3.5. Propriedade Visibility¶

3.6. Propriedade Outline¶

3.7. Propriedade Display¶

4. Propriedades CSS de Layout - Display com o valor Flex¶

FlexBox¶

4.1. Display: Flex¶

4.2. Flex-direction¶

flex-direction : row;¶

flex-direction : column;¶

flexdirection: row-reverse;¶

flexdirection: column-reverse;¶

4.3. Flex-wrap¶

Exemplo1¶

flex-wrap: nowrap;¶

Exemplo2¶

flex-wrap: wrap;¶

Exemplo3¶

flex-wrap: wrap-reverse;¶

Exemplo4:¶

flex-wrap: wrap-reverse;¶

4.4. Justify-content¶

Exemplo1:¶

justify-content: flex-start;¶

Exemplo2:¶

justify-content: flex-end;¶

Exemplo3:¶

justify-content: space-around;¶

Exemplo4:¶

justify-content: space-between;¶

4.5. Align-items¶

Exemplo1:¶

align-items: flex-start;¶

Exemplo2:¶

align-items: flex-end;¶

Exemplo3:¶

align-items: center;¶

Exemplo4:¶

align-items: strech;¶

Exemplo5:¶

align-items: baseline;¶

Existem outras propriedades, tal como align-content. Pesquise a respeito!¶

4.6. Order¶

4.7. Flex-grow¶

4.8. Flex-shrink¶

4.9. Flex-basis¶

Exemplo1:¶

Exemplo2:¶

5. CSS-Grid¶

6. Lista de Tags CSS para Flexbox¶

Referências¶

Perguntas¶